/* 清除浮动 */
.clear:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {
    zoom: 1;
}

/* 颜色 */
@blue: #2e82ff;
@lighterBlue: fade(@blue, 40%);
@red: #fc5a5c;
@lighterRed: fade(@red, 40%);
@dark: #282828;
@grey: #7b7b7b;
@lighterGrey: #8c8c8c;
@lightestGrey: #aaa;
@line: #ddd;

/* 文字尺寸 */
[font~="12"], h4 {
    font-size: 12px;
}

[data-dpr="2"] [font~="12"], [data-dpr="2"] h4 {
    font-size: 24px;
}

[data-dpr="3"] [font~="12"], [data-dpr="3"] h4 {
    font-size: 36px;
}

[font~="14"], h3 {
    font-size: 14px;
}

[data-dpr="2"] [font~="14"], [data-dpr="2"] h3  {
    font-size: 28px;
}

[data-dpr="3"] [font~="14"], [data-dpr="3"] h3 {
    font-size: 42px;
}

[font~="16"], h2 {
    font-size: 16px;
}

[data-dpr="2"] [font~="16"], [data-dpr="2"] h2 {
    font-size: 32px;
}

[data-dpr="3"] [font~="16"], [data-dpr="3"] h2  {
    font-size: 48px;
}

[font~="18"], h1 {
    font-size: 18px;
}

[data-dpr="2"] [font~="18"], [data-dpr="2"] h1 {
    font-size: 36px;
}

[data-dpr="3"] [font~="18"], [data-dpr="3"] h1 {
    font-size: 54px;
}

[font~="20"] {
    font-size: 20px;
}

[data-dpr="2"] [font~="20"] {
    font-size: 40px;
}

[data-dpr="3"] [font~="20"] {
    font-size: 60px;
}

[font~="22"] {
    font-size: 22px;
}

[data-dpr="2"] [font~="22"] {
    font-size: 44px;
}

[data-dpr="3"] [font~="22"] {
    font-size: 66px;
}

[font~="28"] {
    font-size: 28px;
}

[data-dpr="2"] [font~="28"] {
    font-size: 56px;
}

[data-dpr="3"] [font~="28"] {
    font-size: 84px;
}

/* 过度 */
.transition(@type: all) {
    -webkit-transition: @type 0.4s ease 0s;
    -moz-transition: @type 0.4s ease 0s;
    -ms-transition: @type 0.4s ease 0s;
    -o-transition: @type 0.4s ease 0s;
    transition: @type 0.4s ease 0s;
}

/* 圆角 */
.border-radius(@tl: 0.133rem, @tr: 0.133rem, @bl: 0.133rem, @br: 0.133rem) {
    //上左
    border-top-left-radius: @tl;
    -webkit-border-top-left-radius: @tl;
    -moz-border-radius-topleft: @tl;
    //上右
    border-top-right-radius: @tr;
    -webkit-border-top-right-radius: @tr;
    -moz-border-radius-topright: @tr;
    //下左
    border-bottom-left-radius: @bl;
    -webkit-border-bottom-left-radius: @bl;
    -moz-border-radius-bottomleft: @bl;
    //下右
    border-bottom-right-radius: @br;
    -webkit-border-bottom-right-radius: @br;
    -moz-border-radius-bottomright: @br;
}

/* 3D变换 */
.translate3d(@x: 0, @y: 0, @z: 0) {
    -webkit-transform: translate3d(@x,@y,@z);
    -moz-transform: translate3d(@x,@y,@z);
    -ms-transform: translate3d(@x,@y,@z);
    -o-transform: translate3d(@x,@y,@z);
    transform: translate3d(@x,@y,@z);
}

/* 定位 */
.transform(@x: 0, @y: 0) {
    -webkit-transform: translate(@x, @y);
    -moz-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y);
    -o-transform: translate(@x, @y);
    transform: translate(@x, @y);
}

/* 阴影 */
.box-shadow(@x: 0, @y: 0.133rem, @z: 0.133rem, @color: @lighterBlue) {
    -webkit-box-shadow: @x @y @z @color;
    -moz-box-shadow: @x @y @z @color;
    box-shadow: @x @y @z @color;
}

/* 按钮 */
.btn {
    height: 1.173rem;
    line-height: 1.173rem;
    text-align: center;
    display: block;
    .border-radius(0.587rem, 0.587rem, 0.587rem, 0.587rem );
}

.btn-blue {
    background-color: @blue;
    color: #fff;
    .box-shadow();
}